import 'package:aone_common/controllers/game_category/game_category_logic.dart';
import 'package:aone_common/controllers/game_category/game_category_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:prototype/theme/color_schema.dart';

import '../../../theme/custom_theme.dart';

class GameSubClassSelector extends StatelessWidget {
  const GameSubClassSelector({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = GameCategoryLogic.to;
    final state = GameCategoryLogic.to.state;
    final ColorSchema _theme = CustomTheme.colorSchema;

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 18.w),
      height: 60.h,
      child: Obx(
        () => ListView.builder(
          itemCount: state.gameSubClasses.length,
          scrollDirection: Axis.horizontal,
          shrinkWrap: false,
          itemBuilder: (BuildContext context, int index) {
            var item = state.gameSubClasses[index];
            return Align(
              child: Padding(
                padding: EdgeInsets.only(right: 10.w),
                child: SizedBox(
                  height: 32.h,
                  child: Obx(() {
                    var isActive = state.activeSubClass == index;
                    return MaterialButton(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5),
                      ),
                      color: isActive ? _theme.primaryColor : _theme.secondary,
                      onPressed: () => logic.onSelectSubClass(item, index),
                      child: Text(
                        item.name!,
                        style: TextStyle(
                          color: isActive ? _theme.fontColor : _theme.neutral,
                        ),
                      ),
                    );
                  }),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
